<template>
  <div class="container-box">
    <commonNavBar title="修改密码" :isRightIcon="false" @back="$router.go(-1)"></commonNavBar>
    <van-form @submit="onSubmit">
      <van-field v-model.trim="formData.originalPasswrod" type="password" label="原密码" required placeholder="请输入原密码"
        :rules="formRules.originalPwd" />
      <van-field v-model.trim="formData.newPasswrod" type="password" label="新密码" required placeholder="请设置新密码"
        :rules="formRules.newPwd" />
      <van-field v-model.trim="confirmPassword" type="password" label="确认密码" required placeholder="请再次输入新密码"
        :rules="formRules.confirmPwd" />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">保存</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { changePwd } from '@/api/user.js'
export default {
  name: 'ChangePwd',
  data() {
    // const reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?()]+)$)^[\w~!@#$%^&*?()]{8,16}$/
    const reg = /^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{8,16}$/
    const validatorNewPwd = val => {
      console.log(val);
      return reg.test(val)
    }
    const validatorPwd = val => {
      return this.formData.newPasswrod === val
    }
    return {
      formData: {
        originalPasswrod: '',
        newPasswrod: ''
      },
      confirmPassword: '',
      formRules: {
        originalPwd: [{ required: true, message: '请输入原密码!', trigger: 'onBlur' }],
        newPwd: [
          {
            required: true,
            message: '请输入新密码!',
            trigger: 'onBlur'
          },
          {
            validator: validatorNewPwd,
            message: '新密码规则：8-16位，由大写字母、小写字母、数字、特殊字符组成的密码组合；特殊字符包含：@*&!#%等',
            trigger: 'onBlur'
          }
        ],
        confirmPwd: [
          {
            required: true,
            message: '请再次输入新密码!',
            trigger: 'onBlur'
          },
          {
            validator: validatorPwd,
            message: '新密码与旧密码不一致！',
            trigger: 'onBlur'
          }
        ]
      }
    }
  },
  methods: {
    async onSubmit() {
      const res = await changePwd(this.formData)
      if (res.status === 200) return this.$toast.success(res.msg)
    },

  }
}
</script>

<style lang="less" scoped>
.container-box {
  /deep/.van-nav-bar .van-icon {
    // font-size: 60px !important;
    color: #061226;
  }

  /deep/.van-cell {
    font-size: 30px;
  }

  /deep/.van-button {
    height: 100px;
  }

  /deep/.van-button--info {
    font-size: 30px;
  }

  /deep/input.van-field__control::-webkit-input-placeholder {
    color: #c8c9cc;
  }
}
</style>
